import {
  Breadcrumb,
  Card,
  Form,
  Input,
  Radio,
  Upload,
  Select,
  Space,
  Button,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import "./index.scss";
const { Option } = Select;
import { Link } from "react-router-dom";
import ReactQuill from "react-quill"; //引入富文本编辑器
import "react-quill/dist/quill.snow.css"; // 引入样式
import { useEffect, useState } from "react";
import { getChannelsAPI } from "@/apis/common";
import { postArticleAPI } from "@/apis/publish";
const Publish = () => {
  // 请求下拉框数据
  const [channelList, setChannelList] = useState([]);
  useEffect(() => {
    async function getChannelList() {
      const res = await getChannelsAPI();
      setChannelList(res.data.channels);
    }
    getChannelList();
  }, []);
  //上传图片
  const [imageList, setImageList] = useState([]);
  const onUpLoadChange = (info) => {
    setImageList(info.fileList);
  };
  useEffect(() => {
    console.log(imageList);
  }, [imageList]);
  //获取上传图片的模式
  const [imageType, setImageType] = useState(1);
  const onTypeChange = (e) => {
    console.log(e.target.value);
    setImageType(e.target.value);
  };
  //发布文章
  const onFinish = async (formValue) => {
    if (imageType != imageList.length) return alert("图片类型和数量不一致");
    const { title, channel_id, content } = formValue;
    const params = {
      title,
      channel_id,
      content,
      type: 1,
      cover: {
        type: imageType,
        images: imageList.map((item) => item.response.thumbUrl),
      },
    };
    await postArticleAPI(params);
    alert("发布成功");
  };
  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb
            items={[
              { title: <Link to={"/"}>首页</Link> },
              { title: "发布文章" },
            ]}
          />
        }
      >
        <Form onFinish={onFinish}>
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "请输入文章标题" }]}
          >
            <Input placeholder="请输入文章标题" />
          </Form.Item>
          <Form.Item label="频道" name="channel_id">
            <Select placeholder="请选择文章频道">
              {channelList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          {/* 上传图片 */}
          <Form.Item label="封面" name="coverType" initialValue="3">
            <Radio.Group onChange={onTypeChange}>
              <Radio value="1">单图</Radio>
              <Radio value="3">三图</Radio>
              <Radio value="0">无图</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            {imageType > 0 && (
              <Upload
                listType="picture-card"
                className="avatar-uploader"
                showUploadList
                action={
                  "http://127.0.0.1:4523/m1/7045508-6765544-default/upload"
                }
                onChange={onUpLoadChange}
                maxCount={imageType}
                multiple={imageType > 1}
              >
                <div>
                  <PlusOutlined />
                  <div style={{ marginTop: 8 }}>Upload</div>
                </div>
              </Upload>
            )}
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: "请输入文章内容" }]}
          >
            <ReactQuill
              className="publish-quill"
              theme="snow"
              placeholder="请输入文章内容"
            />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default Publish;
